<template>
  <div style="color: rgba(0, 0, 0, 0.7); padding: 30px">
    <!-- <div class="flex bg-gray-400">
      <div style="width: 400px" class="flex-shrink-0">商品信息</div>
      <div style="width: 200px">SKU信息</div>
      <div style="width: 200px">入库数量</div>
      <div style="width: 200px">推荐库位</div>
      <div style="width: 200px">入库单价</div>
      <div style="width: 200px">批次</div>
      <div style="width: 200px">备注信息</div>
      <div style="width: 200px">操作</div>
    </div> -->
    <div class="box-item">
      <div v-for="(item, index) in list" :key="index" class="flex">
        <div
          class="flex items-center justify-center flex-shrink-0 border-r-2 mr-3"
          style="width: 300px"
        >
          <el-button type="primary" size="small" @click="handleAdd(index)">
            添加SKU
          </el-button>
        </div>
        <div>
          <div
            v-for="(node, index_2) in item.recommend"
            :key="index_2"
            class="recommend-item"
          >
            <div class="flex">
              <div style="width: 200px">
                <div>SKU信息</div>
              </div>
              <div style="width: 200px">入库数量</div>
              <div style="width: 200px">推荐库位</div>
              <div style="width: 200px">入库单价</div>
              <div style="width: 200px">批次</div>
              <div style="width: 200px">备注信息</div>
              <div style="width: 200px">操作</div>
            </div>
            <div
              class="bottom-tips"
              v-if="index_2 !== item.recommend.length - 1"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import rfdc from "rfdc";

export default {
  name: "inventory-2",
  data() {
    return {
      list: [
        {
          url: "https://ykt-rt.yiketu.com/sys/ai_img_scene_model_pose/img/2025-03-11/50828106939d0104ca43390ff54e59a4.png?x-oss-process=image%2Fresize%2Cw_200%2Cm_lfit%2Fformat%2Cwebp",
          id: 1,
          title: "法式小面包",
          codeTitle: "京牛编码",
          code: "293846789712901",
          recommend: [
            {
              color: "绿色",
              size: "S",
              marketPrice: 189,
              inventoryPrice: 99,
              averagePrice: 0,
              inventoryNum: 0,
              remark: "",
              storeNum: 100,
              batch: "1234567890",
              unitPrice: 0,
              recommend: [
                {
                  recommendNum: 0,
                  location: [],
                },
              ],
            },
            {
              color: "绿色",
              size: "S",
              marketPrice: 189,
              inventoryPrice: 99,
              averagePrice: 0,
              inventoryNum: 0,
              remark: "",
              storeNum: 100,
              batch: "1234567890",
              unitPrice: 0,
              recommend: [
                {
                  recommendNum: 0,
                  location: [],
                },
              ],
            },
            {
              color: "绿色",
              size: "S",
              marketPrice: 189,
              inventoryPrice: 99,
              averagePrice: 0,
              inventoryNum: 0,
              remark: "",
              storeNum: 100,
              batch: "1234567890",
              unitPrice: 0,
              recommend: [
                {
                  recommendNum: 0,
                  location: [],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleAdd(index) {
      const data = rfdc()(this.list);
      data[index].recommend.push({
        color: "绿色",
        size: "S",
        marketPrice: 189,
        inventoryPrice: 99,
        averagePrice: 0,
        inventoryNum: 0,
        remark: "",
        storeNum: 100,
        batch: "1234567890",
        unitPrice: 0,
        recommend: [],
      });
      this.list = data;
    },
  },
};
</script>

<style>
.pb {
  padding-bottom: 10px;
}
.box-item {
  border: solid 1px #e4e3e3;
}
.bottom-tips {
  width: 85%;
  border-top: 2px dashed #e4e3e3;
  margin: 10px 20px;
}
</style>